<template>
  <div class="detail">
      <v-tableTitle :btnConfig="btnConfig" :tableSelectData="selectData" @cancel="cancel" @save="save" @newCreate="newCreate" @del="del"></v-tableTitle>
      <component :data="{ detailData, argument }" :is="currentComponent"></component>
  </div>
</template>

<script>
import baseMixin from "@/mixins/BaseMixin";
import tableTitle from "commons/TableTitle";

export default {
  mixins: [baseMixin],
  props:['areakey'],
  data() {
    return {
      newFlag: false,
      argument: {},
      detailData: {
        areakey: "",
        putawayzone: "",
      },
      selectData: [],
      detailNav: "1",
      componentConfig: [
        {
          name: "Table",
          label: this.$t('config.tableDetail'),
          component: () => import('./page/Table.vue')
        },
        {
          name: "particulars",
          label: "particulars",
          component: () => import('./page/particulars.vue')
        },
      ],
    }
  },
  computed: {
    currentComponent() {
      return this.componentConfig[this.detailNav - 1].component;
    },
    btnConfig() {
      if (this.detailNav != 1) {
        return [
          { label: this.$t('common.save'), certigier: !this.btnPermNameList.includes('WM03100103'), invalid: "save" },
          { label: this.$t('common.cancel'), certigier: !this.btnPermNameList.includes('WM03100104'), invalid: "cancel" },
        ]
      } else {
        return [
          { label: this.$t('common.create'), certigier: !this.btnPermNameList.includes('WM03100104'), invalid: "newCreate" },
          { label: this.$t('common.delete'), certigier: !this.btnPermNameList.includes('WM03100105'), invalid: "del",disabled:true },
        ]
      }
    }
  },
  methods: {
    newCreate(){
      this.detailData = {
        areakey: "",
        putawayzone: "",
      };
      this.detailNav = 2;
    },
    async del() {
      try {
        let res = await this.$api.post(`/deleteAreaDetail`, this.selectData);
        
          this.$message.success(res.returnMgr);
          this.$children[1].getTableData(1, {});
          // this.$children[0].$refs.table.delSelectData(this.selectData);
        
      } catch (e) {
        this.$message.error(e);
      }
    },
    cancel(){
      this.detailNav = 1;
    },
    //保存按钮
    async save() {
      let flag = this.$children[1].$refs.input.submitForm("from");
      if (!flag) {
        return;
      }
      let datailsListData = this.detailData;
      datailsListData.areakey = this.areakey;
      try {
        let res = await this.$api.post('/insertArea', datailsListData);
        
          this.$message.success(res.returnMgr);
          this.cancel()
        
      } catch (e) {
        this.$message.error(e);
      }
    },
    setdialog(data){
      this.detailData = data;
      this.detailNav = 2;
    }
  },
  watch:{
    areakey(val){
      this.argument = {areakey:val}
    }
  },
  mounted() {
    const areakey = this.areakey||this.$route.query?.areakey;
    if(areakey){
      this.argument = {areakey}
    }else{
      this.detailNav = '2';
    }
  },
  components: {
    "v-tableTitle": tableTitle,
  },
}
</script>

<style>

</style>
